﻿<%@ Page Title="Easy Pie Charts" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="EasyPieCharts.aspx.cs" Inherits="BeyondAdmin.WebForms.Pages.EasyPieCharts" %>

<asp:Content ID="Main" ContentPlaceHolderID="MainContent" runat="server">
    <div class="row">
        <div class="col-lg-12 col-sm-12 col-xs-12">
        </div>
    </div>
    <div class="easy-pie-chart-preview">
        <div class="row">
            <div class="col-lg-12 col-sm-12 col-xs-12">
                <div class="row">
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well">
                            <div class="header bg-blue">Default Chart</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-percent="65" data-barcolor="#6f85bf">65%</div>
                            <div class="footer"><code>data-percent="65"</code></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well">
                            <div class="header bg-yellow">With Track Color</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-percent="73" data-barcolor="#ed4e2a" data-trackcolor="#fff1a8" data-linewidth="10">73%</div>
                            <div class="footer"><code>data-trackcolor="#fff1a8"</code></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well">
                            <div class="header bg-pink">With Scale</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-percent="25" data-barcolor="#fb3c4a" data-scalecolor="#C2C2C2" data-linewidth="5"><span class="danger font-80">25%</span> </div>
                            <div class="footer"><code>data-scalecolor="#c2c2c2"</code></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well">
                            <div class="header bg-darkorange">Rounded</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-percent="55" data-barcolor="#fbcb43" data-linewidth="10" data-linecap="round">55%</div>
                            <div class="footer"><code>data-linecap="round/butt/square"</code></div>
                        </div>
                    </div>
                </div>
                <div class="horizontal-space"></div>
                <div class="row">
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well">
                            <div class="header bg-palegreen">With Animation</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-percent="80" data-animate="1000" data-linewidth="10" data-size="130" data-barcolor="#65b045">80%</div>
                            <div class="footer"><code>data-animate="1000"</code></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well">
                            <div class="header bg-blueberry">Big Pie</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#11a9cc" data-linecap="butt" data-percent="50" data-animate="1000" data-linewidth="10" data-size="150">50%</div>
                            <div class="footer"><code>data-size="150"</code></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well bg-darkpink">
                            <div class="header bg-darkpink">Colors and Size</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#fff" data-linecap="butt" data-percent="70" data-animate="500" data-linewidth="5" data-size="150"><span class="white">70%</span></div>
                            <div class="footer"><code>data-barcolor="#fff"</code></div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-sm-6 col-xs-12">
                        <div class="well">
                            <div class="header bg-sky">Different Sizes</div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#11a9cc" data-linecap="butt" data-percent="90" data-animate="500" data-linewidth="3" data-size="30"><span class="font-70 sky">90%</span> </div>
                            <div class="horizontal-space"></div>
                            <div data-toggle="easypiechart" class="easyPieChart" data-barcolor="#11a9cc" data-linecap="butt" data-percent="90" data-animate="500" data-linewidth="3" data-size="70"><span class="font-70 sky">90%</span> </div>

                            <div class="footer"><code>data-size="30"</code></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</asp:Content>
<asp:Content ID="Scripts" ContentPlaceHolderID="PageScriptContent" runat="server">
    <script src="/assets/js/charts/easypiechart/jquery.easypiechart.js"></script>
    <script src="/assets/js/charts/easypiechart/easypiechart-init.js"></script>
    <script>
        $(window).bind("load", function () {

            /*Sets Themed Colors Based on Themes*/
            themeprimary = getThemeColorFromCss('themeprimary');
            themesecondary = getThemeColorFromCss('themesecondary');
            themethirdcolor = getThemeColorFromCss('themethirdcolor');
            themefourthcolor = getThemeColorFromCss('themefourthcolor');
            themefifthcolor = getThemeColorFromCss('themefifthcolor');

            InitiateEasyPieChart.init();
        });
    </script>
</asp:Content>
